<template>
	<custom-layout custom-class="custom-layout">
		<!-- 佣金列表 -->
		<view v-if="commissionList.length" class="commissionList">
			<!-- 卡片 -->
			<wd-card v-for="_ in commissionList" :key="_.id" custom-class="card">
				<view class="rewardType">
					<image v-if="_.status==1&&_.rewardType==1" src="/static/image/record/new-user.png" mode="aspectFit" class="rewardType-img"></image>
					<image v-if="_.status==2" src="/static/image/record/rewordType-error.png" mode="aspectFit" class="rewardType-img"></image>
					<image v-if="_.status==1&&_.rewardType!=1" src="/static/image/record/other.png" mode="aspectFit" class="rewardType-img"></image>
					
					<text class="rewardType-text">{{dictionaryStore.analysis('commission_operation_type',_.rewardType)}}</text>
				</view>
				<template #title>
					<view class="top-title">
						<view class="crateTime">{{_.createTime&&dayjs(_.createTime).format('YYYY-MM-DD HH:mm:ss')}}</view>
						<view class="money">
							<image v-if="_.status == 2" src="/static/image/record/error.png" mode="aspectFit" class="status-img"></image>
							<image v-else src="/static/image/record/success.png" mode="aspectFit" class="status-img"></image>
							<text>{{(_.money).toFixed(2)}}</text>
							<image v-if="_.status == 2" src="/static/image/record/withdraw-gray.png" mode="aspectFit" class="withdrawal-img"></image>
							<image v-else src="/static/image/record/withdraw.png" mode="aspectFit" class="withdrawal-img"></image>
						</view>
						
					</view>
				</template>
				<wd-divider color="#efefef"></wd-divider>
				
				<view class="card-item">
					<view class="title">备注</view>
					<view class="content">{{_.remark}}</view>
				</view>
				
			</wd-card>
		</view>
		<!-- 空 -->
		<wd-status-tip v-else image="search" tip="暂无数据" />
	</custom-layout>
</template>

<script setup>
	import {
		ref,
		watch
	} from 'vue'
	import {
		getCommissionList
	} from '@/api/commission/index.js'
	import {
		useDictionaryStore,
		useUserStore
	} from '@/store/index.js'
	import dayjs from 'dayjs'

	// 字典仓库
	const dictionaryStore = useDictionaryStore()
	// 用户仓库
	const userStore = useUserStore()
	// 佣金列表
	const commissionList = ref([])
	// 处理获取佣金列表
	const handleGetCommissionList = () => {
		uni.showLoading()
		const params = {
			wxUserId: userStore.userId
		}
		getCommissionList(params).then((data) => {
			commissionList.value = data
		}).catch((error) => {
			setTimeout(() => {
				uni.showToast({
					title: error,
					icon: 'error'
				})
			})
		}).finally(() => {
			uni.hideLoading()
		})
	}
	// 监听用户id
	watch(() => userStore.userId, () => {
		if (userStore.userId && !commissionList.value.length) handleGetCommissionList()
	}, {
		immediate: true
	})
</script>

<style lang="scss" scoped>
	// 自定义布局
	:deep(.custom-layout) {
		background: #F8F8F8;
	}

	// 佣金列表
	.commissionList {
		:deep(.card) {
			position: relative;
		}
		.rewardType {
			width: 267rpx;
			height: 72rpx;
			position: absolute;
			right: 0;
			top: 0;
			.rewardType-img {
				width: 100%;
				height: 100%;
			}
			.rewardType-text {
				position: absolute;
				top: 50%; /* 垂直居中 */
				left: 57%; /* 水平居中 */
				transform: translate(-50%, -50%); /* 偏移以完全居中 */
				font-size: 18px;
				color: #fff;
				text-align: center;
				width: 100%;
			}
			
		}
		.top-title {
			.crateTime {
				color: #a5a5a5;
				font-size: 24rpx;
				margin-bottom: 16rpx;
			}
			.money {
				display: flex;
				// justify-content: flex-start;
				text {
					font-weight: bold;
					font-size: 50rpx;
					margin: 0 10rpx;
					
				}
				.withdrawal-img {
					width: 69rpx;
					height: 34rpx;
				}
				.status-img {
					width: 50rpx;
					height: 50rpx;
					display: flex;
					align-self: center;
					
				}
				
			}
			
			
		}
		.card-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			color: #333333;
			margin: 10rpx 0;
			.title {
				color: #a5a5a5;
			}
		}

		.footer {
			:deep(.button) {
				margin: 0 6rpx;
			}
		}
		:deep(.wd-divider) {
			margin-top: 0;
		}
		:deep(.wd-card__footer) {
			padding-bottom: 4px;
		}

	}
</style>